<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习 vue</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			小结
			计算属性：
			1，定义：要用的属性不存在，要通过已有属性计算得来。
			2.原理：底层借助了objcet. defineproperty方法提供的getter和setter.
			3.get函数什么时候执行？
			（1），初次读取时会执行一次。
			（2），当依赖的数据2生改变时会被再次调用。
			4，优势： 与methods实现相比，内部有缓存机制（复用） ，效率更高，调试方便。
			5，备注：
			1·计算属性最终会出现在vm上，直按读取使用即可。
			2，如果计算属性要被修改，那必须写set函数去响应修改， Hset中要引起计算时依赖的数据发生改变
			

		 -->
		<!-- 创建容器 -->
		<div id="root">
		姓:<input type="text" name="" id="" v-model="firstName" />
		名:<input type="" name="" id="" v-model="lastName" />
		全名:<span>{{fullName}}</span>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false
			
			//创建vue实例
			const vm= new Vue({
				el:'#root',
				data:{
					firstName:'张',
					lastName:'三'
					
				},
				//计算属性
				//computed存储计算属性列表
				computed:{
					//fullName是一个属性，不是函数
					fullName:{
						//get()
						//当有人读取fullName，get函数被调用，返回值为fullName
						//get()的调用时机：
						//1.初次读取fullName()
						//2.所依赖的数据发生变化时
						get(){
							console.log('get调用')
							//此处的this是vm
							console.log(this)
							return this.firstName+'-'+this.lastName
						},
						// set()
						//set()的调用时机：当fullName被修改时
						set(value){
							const arr=value.split('-');
							this.firstName=arr[0]
							this.lastName=arr[1]
						}
					}
				}
			})
		</script>
	</body>
</html>
